<template>
    <div class="person-svg">
        <svg width="712" height="703" viewBox="0 0 712 703" fill="none" xmlns="http://www.w3.org/2000/svg">
            <g id="&#229;&#156;&#134;">
                <!-- 空 -->
                <circle id="Ellipse 1939" cx="344" cy="351" r="336" fill="#DAEBFF" fill-opacity="0.41" />
                <circle id="Ellipse 1938" cx="344.5" cy="351.5" r="251.5" fill="#98C7FF" fill-opacity="0.37" />
                <path id="Vector 4484" d="M562 207.5L462 288.5" stroke="#0060D2" stroke-width="1.6"
                    stroke-dasharray="5 5" />
                <circle id="Ellipse 1923" cx="166" cy="249" r="62" fill="#92C4FF" fill-opacity="0.18" />
                <circle id="Ellipse 1934" cx="248" cy="553" r="62" fill="#92C4FF" fill-opacity="0.18" />
                <circle id="Ellipse 1930" cx="582.5" cy="189.5" r="45.5" fill="#92C4FF" fill-opacity="0.18" />
                <circle id="Ellipse 1925" cx="166" cy="136" r="62" fill="#92C4FF" fill-opacity="0.18" />
                <path id="Vector 4477" d="M195 269L235.5 295.5" stroke="#0060D2" stroke-width="1.6"
                    stroke-dasharray="5 5" />

                <path id="Vector 4480" d="M265 525L292 473" stroke="#0060D2" stroke-width="1.6"
                    stroke-dasharray="5 5" />
                <path id="Vector 4476" d="M191.5 166L264 251" stroke="#0060D2" stroke-width="1.6"
                    stroke-dasharray="5 5" />
                <circle id="Ellipse 1924" cx="166.5" cy="249.5" r="39.5" fill="#E8F3FF" />
                <circle id="Ellipse 1935" cx="248.5" cy="553.5" r="39.5" fill="#E8F3FF" />
                <circle id="Ellipse 1931" cx="583" cy="190" r="30" fill="#F9F9F9" />
                <circle id="Ellipse 1927" cx="166" cy="136" r="43" fill="#E8F3FF" />


                <!-- 出入境记录 -->
                <g class="node" data-name="出入境记录" @click="onNode('出入境记录')">
                    <path id="Vector 4478" d="M106 333.5L226 351" stroke="#0060D2" stroke-width="1.6"
                        stroke-dasharray="5 5" />
                    <circle id="Ellipse 1921" cx="63" cy="323" r="62" fill="#92C4FF" fill-opacity="0.18" />
                    <circle id="Ellipse 1922" cx="63" cy="323" r="49" fill="#E8F3FF" />
                    <text x="63" y="310" class="text blue size22">
                        <tspan x="63" dy="0">出入境</tspan>
                        <tspan x="63" dy="26">记录</tspan>
                    </text>
                </g>

                <!-- 申报记录 -->
                <g class="node" data-name="申报记录" @click="onNode('申报记录')">
                    <path id="Vector 4479" d="M156 462L240.5 424" stroke="#0060D2" stroke-width="1.6" />
                    <circle id="Ellipse 1917" cx="97" cy="482" r="97" fill="#92C4FF" fill-opacity="0.18" />
                    <circle id="Ellipse 1918" cx="97.5" cy="482.5" r="66.5" fill="#92C4FF" />
                    <text x="97.5" y="465.5" class="text size36">
                        <tspan x="97.5" dy="0">申报</tspan>
                        <tspan x="97.5" dy="40">记录</tspan>
                    </text>
                </g>

                <!-- 征税记录 -->
                <g class="node" data-name="征税记录" @click="onNode('征税记录')">
                    <path id="Vector 4481" d="M351 584V481" stroke="#0060D2" stroke-width="1.6"
                        stroke-dasharray="5 5" />
                    <circle id="Ellipse 1936" cx="350.5" cy="629.5" r="73.5" fill="#92C4FF" fill-opacity="0.18" />
                    <circle id="Ellipse 1937" cx="350.5" cy="629.5" r="50.5" fill="#E8F3FF" />
                    <text x="350.5" y="613.5" class="text blue size28">
                        <tspan x="350.5" dy="0">征税</tspan>
                        <tspan x="350.5" dy="32">记录</tspan>
                    </text>
                </g>

                <!-- 寄递物品信息 -->
                <g class="node" data-name="寄递物品信息" @click="onNode('寄递物品信息')">
                    <path id="Vector 4482" d="M543.5 500.5L453.5 424.5" stroke="#0060D2" stroke-width="1.6" />
                    <circle id="Ellipse 1919" cx="588" cy="537" r="97" fill="#92C4FF" fill-opacity="0.18" />
                    <circle id="Ellipse 1920" cx="588.5" cy="537.5" r="66.5" fill="#92C4FF" />
                    <text x="588.5" y="507.5" class="text size24">
                        <tspan x="588.5" dy="0">寄递</tspan>
                        <tspan x="588.5" dy="30">物品</tspan>
                        <tspan x="588.5" dy="30">信息</tspan>
                    </text>
                </g>

                <!-- 检疫记录 -->
                <g class="node" data-name="检疫记录" @click="onNode('检疫记录')">
                    <path id="Vector 4483" d="M561 317L475 339" stroke="#0060D2" stroke-width="1.6" />
                    <circle id="Ellipse 1932" cx="624.5" cy="302.5" r="87.5" fill="#92C4FF" fill-opacity="0.18" />
                    <circle id="Ellipse 1933" cx="624.5" cy="302.5" r="68.5" fill="#4299FF" />
                    <text x="624.5" y="281" class="text size36">
                        <tspan x="624.5" dy="0">检疫</tspan>
                        <tspan x="624.5" dy="43">记录</tspan>
                    </text>
                </g>

                <!-- 消费记录 -->
                <g class="node" data-name="消费记录" @click="onNode('消费记录')">
                    <path id="Vector 4485" d="M453.5 189L414 254" stroke="#0060D2" stroke-width="1.6"
                        stroke-dasharray="5 5" />
                    <circle id="Ellipse 1928" cx="478" cy="154" r="75" fill="#92C4FF" fill-opacity="0.18" />
                    <circle id="Ellipse 1929" cx="478" cy="154" r="48" fill="#E8F3FF" />
                    <text x="478" y="140" class="text blue size24">
                        <tspan x="478" dy="0">消费</tspan>
                        <tspan x="478" dy="30">记录</tspan>
                    </text>
                </g>

                <!-- 进出岛记录 -->
                <g class="node" data-name="进出岛记录" @click="onNode('进出岛记录')">
                    <path id="Vector 4475" d="M326 222.5V163.5" stroke="#0060D2" stroke-width="1.6" />
                    <circle id="Ellipse 1915" cx="325" cy="97" r="97" fill="#92C4FF" fill-opacity="0.18" />
                    <circle id="Ellipse 1916" cx="325.5" cy="97.5" r="66.5" fill="#92C4FF" />
                    <text x="325.5" y="61.5" class="text size30">
                        <tspan x="325.5" dy="20">进出岛</tspan>
                        <tspan x="325.5" dy="36">记录</tspan>
                    </text>
                </g>




                <!-- 姓名圆 -->
                <circle id="Ellipse 1914" cx="344.5" cy="351.5" r="125.5" fill="white" stroke="#4299FF"
                    stroke-width="18" />
                <!-- <image x="219" y="226" width="251" height="251" href="http://localhost:8086/logo.png"
                    clip-path="url(#avatarClip)" /> -->
                <foreignObject x="219" y="226" width="251" height="251">
                    <img src="/person.png" style="width: 251px; height: 251px; border-radius: 50%;" />
                </foreignObject>    
            
            </g>
        </svg>

    </div>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus';

function onNode(value: string) {
    ElMessage(value)
}
</script>


<style lang="less" scoped>
.person-svg {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;

    svg {
        overflow: visible;
    }

    .node {
        transition: all 0.3s ease;
        cursor: pointer;
        transform-box: fill-box;
        transform-origin: center center;

        &:hover {
            transform: scale(1.2);
        }

        .text {
            font-size: 14px;
            font-weight: bold;
            fill: #fff;
            text-anchor: middle;
            dominant-baseline: middle;
            pointer-events: none;

            &.blue {
                fill: #0060D2;
            }

            &.size36 {
                font-size: 36px;
            }

            &.size30 {
                font-size: 30px;
            }

            &.size28 {
                font-size: 28px;
            }

            &.size24 {
                font-size: 24px;
            }

            &.size22 {
                font-size: 22px;
            }
        }
    }


}
</style>